<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>编辑菜单</title>
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../../static/js/vue-router231.js" th:src="@{/js/vue-router231.js}"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}" />
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}" />
	<!-- 引入组件库 -->
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
	<body>
		<div id="app">
			<leftbar></leftbar>
			<topbar></topbar>
			<div class="main-content">
				<el-breadcrumb separator-class="el-icon-arrow-right">
						  <el-breadcrumb-item :to="{ path: '/personnel' }">菜单</el-breadcrumb-item>
						  <el-breadcrumb-item >编辑菜单</el-breadcrumb-item>
				</el-breadcrumb>
			<el-row>
	            <el-col :span="12">
	                <el-form ref="menu-form" :model="menu" :rules="rules" label-width="80px" size="small">
		                 <el-form-item hidden label="ID" prop="uuid">
	                        <el-input v-model="menu.uuid"></el-input>
	                    </el-form-item>
	                    <el-form-item label="菜单名称" prop="name">
	                        <el-input v-model="menu.name"></el-input>
	                    </el-form-item>
	                    
	                    <el-form-item label="菜单链接" prop="url">
	                        <el-input  v-model="menu.url"></el-input>
	                    </el-form-item>
	                    
	                    <el-form-item label="菜单图标" prop="icon">
	                        <el-input v-model="menu.icon"></el-input>
	                    </el-form-item>
	                    
	                    <el-form-item label="类型" prop="type">
	                        <el-radio-group v-model="menu.type">
                            <el-radio :label="0">平台菜单</el-radio>
                            <el-radio :label="1">商户菜单</el-radio>
                        </el-radio-group>
	                    </el-form-item>
	                    
	                    <el-form-item label="显示顺序" prop="index">
	                        <el-input  v-model.number="menu.index"></el-input>
	                    </el-form-item>
	                    
	                    <el-form-item label="上级菜单" prop="parentId">
	                        <el-select v-model="menu.parentId" placeholder="请选择上级菜单">
                            <el-option label="产品部" value="product"></el-option>
                            <el-option label="商务部" value="business"></el-option>
                        </el-select>
	                    </el-form-item>
	                    
	                    <el-form-item label="是否显示">
	                        <el-radio-group v-model="menu.state">
                            <el-radio :label="1" >是</el-radio>
                            <el-radio :label="2" >否</el-radio>
	                    </el-form-item>
	                </el-form>
	            </el-col>
	        </el-row>
        	<div class="edit-button">
				<el-button type="primary" :plain="true" @click="saveMenu">保存</el-button>
				<el-button @click=returnBack>取消</el-button>
			</div>
		  </div>
		</div>
	</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
new Vue({
    el: "#app",
    data: {
    	menu: [[${dto}]],
        rules: {
        	name: [
                {required: true, message: "请输入菜单名称", trigger: 'blur'},
                {max: 20, message: '菜单名称不能超过20个字符', trigger: 'blur' }
            ],
            url: [{max: 200, message: '菜单链接不能超过200个字符', trigger: 'blur' }],
            type: [{required: true, message: "请选择菜单类型", trigger: 'change'}],
            index:[{ type: 'number', message: '显示顺序为数字值'}]
        }
    },
    methods: {
        handleCheckedCitiesChange: function (val) {
            this.checked1 = val.length > 0;
        },
        handleCheckAllChange: function (val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        saveMenu: function () {
            var self = this;
            self.$refs['menu-form'].validate((valid) => {
                if (valid) {
                    $.ajax({
                        url: "/system/menu/edit",
                        type: "POST",
                        data: JSON.stringify(self.menu),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function(data) {
                            if (data && data.returnCode == "1") {
                            	self.$alert('编辑菜单成功', {
                                      confirmButtonText: '确定',
                                      callback: action => {
                                    	  window.location.href = "/system/menu/tolist"
                                      }
                                    });
                            } else {
                            	self.$alert('编辑菜单失败', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                  	  window.location.href = "/system/menu/tolist"
                                    }
                                  });
                            }
                        }
                    });
                } else {
                    this.$message({
                        message: '请正确填写菜单信息',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },
        returnBack: function(){
        	window.location.href = "/system/menu/tolist";
        }
    }
});
</script>	
</html>
